<template>
    <div class="ClassManage">
        <div class="crumbs">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>人员管理</el-breadcrumb-item>
                <el-breadcrumb-item>班级管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search" style="margin-left: 10px;">搜索
                </el-button>
                <el-button icon="search" type="success" @click="addVisible = true">新增<i
                        class="el-icon-circle-plus-outline el-icon--right"></i>
                </el-button>
                <el-select v-model="schoolName" placeholder="请选择学校" style="margin-left: 30px;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <el-table :data="tableList" border class="table" ref="multipleTable" fit stripe highlight-current-row
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" align="center"></el-table-column>
                <el-table-column prop="classId" width="120" label="id" sortable>
                </el-table-column>
                <el-table-column prop="className" width="120" label="班级名称" :formatter="formatter">
                </el-table-column>
                <el-table-column label="操作" width="220" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" class="org"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button type="text" icon="el-icon-delete" class="red"
                            @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 删除提示框 -->
            <el-dialog title="警告" :visible.sync="delVisible" width="400px" center>
                <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="delVisible = false">取 消</el-button>
                    <el-button type="primary" @click="deleteRow">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <!-- 新增框 -->
        <el-dialog title="添加班级信息" custom-class="editClass" width="60%" :visible.sync="addVisible"
            :close-on-press-escape="false" :close-on-click-modal="false">
            <div class="form">
                <el-form :mode="addform" :label-position="labelPosition">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="班级名称" label-width="120px">
                                <el-input v-model="addform.classInfo.className"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所属年级" label-width="120px">
                                <el-input v-model="addform.classInfo.gradeIndex"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="学校编号" label-width="120px">
                                <el-input v-model="addform.classInfo.schoolId" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="班级编号" label-width="120px">
                                <el-input v-model="addform.classInfo.classCode"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer" style="padding-left: 50px">
                    <el-button @click="addVisible = false">取 消</el-button>
                    <el-button type="primary" @click="insertClazz">提 交</el-button>
                </div>
            </div>
        </el-dialog>
        <!-- 编辑框 -->
         <el-dialog title="修改班级信息" custom-class="editClass" width="60%" :visible.sync="editVisible"
            :close-on-press-escape="false" :close-on-click-modal="false">
            <div class="form">
                <el-form :mode="editform" :label-position="labelPosition">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="班级名称">
                                <el-input v-model="editform.className"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" v-if="false">
                            <el-form-item label="班级id">
                                <el-input v-model="editform.classId"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateClazz">提 交</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {
        GETCLAZZ,
        DELETE_CLAZZ_BYID,
        INSERT_CLAZZ,
        UPDATE_CLAZZ,
        HKACCESSTOKEN
    } from '@/api/api.js'
    import {
        mapState,
        mapGetters
    } from 'vuex'
    import axios from 'axios'
    export default {
        name: 'ClassManage',
        data() {
            return {
                tableData: [],
                select_cate: '',
                select_word: '',
                del_list: [],
                schoolName: '',
                options: [{
                        value: '1',
                        label: '学校1'
                    },
                    {
                        value: '2',
                        label: '学校2'
                    },
                    {
                        value: '3',
                        label: '学校3'
                    },
                ],
                delVisible: false,
                delId: '',
                labelPosition: 'right',
                addform: {
                    id: '',
                    schoolId: '',
                    classInfo: {
                        studyLevel: 1,
                        gradeIndex: '',
                        className: '',
                        classCode: ''
                    }
                },
                editform: {
                    classId: '',
                    className: ''
                },
                addVisible: false, // 新增框控制
                editVisible: false, // 编辑框控制
                NowToken: ''
            }
        },
        computed: {
            tableList() {
                return this.tableData.filter((d) => {
                    let is_del = false;
                    for (let i = 0; i < this.del_list.length; i++) {
                        if (d.className === this.del_list[i].className) {
                            is_del = true;
                            break;
                        }
                    }
                    if (!is_del) {
                        if (d.className.indexOf(this.select_cate) > -1 && (d.className.indexOf(this
                                .select_word) > -1 ||
                                d.className.indexOf(this.select_word) > -1)) {
                            return d;
                        }
                    }
                })
            },
            ...mapState({
                schoolId: state => state.schoolId,
                hkSchoolId: state => state.hkSchoolId
            })
        },
        created() {
            
        },
        mounted() {
            this.getClazz()
            this.getToken()
            this.addform.classInfo.schoolId = this.hkSchoolId
        },
        methods: {
            formatter(row, column) {
                return row.className;
            },
            search() {
                this.is_search = true;
            },
            // 编辑按钮
            handleEdit(index, row) {
                this.editform = row;
                this.editVisible = true
            },
            // 删除按钮
            handleDelete(index, row) {
                this.delVisible = true
                this.delId = row.classId
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            /**
             * @desc 查询班级信息
             * @param: schoolId
             * @return: Array
             */
            async getClazz() {
                let that = this
                await that.$GET(`${GETCLAZZ}`, {
                        schoolId: that.schoolId
                    })
                    .then(res => {
                        if (res.code == 200) {
                            let data = []
                            res.data.forEach((value, index, array) => {
                                data.push({
                                    classId: value.classId,
                                    className: value.className
                                })
                            });
                            // console.log(data)
                            that.tableData = data
                        }
                    })
            },
            /**
             * @desc 删除班级信息
             * @param: schoolId classID
             * @return data
             */
            async deleteRow() {
                let that = this
                console.log(this.delId)
                await that.$GET(`${DELETE_CLAZZ_BYID}`, {
                        clazzId: that.delId,
                        schoolId: that.schoolId
                    })
                    .then(res => {
                        if (res.code == 200) {
                            that.delVisible = false
                            that.$message({
                                message: `${res.msg}`,
                                type: 'success'
                            });
                            that.getClazz()
                        } else {
                            this.$message({
                                message: `删除失败`,
                                type: 'error'
                            });
                        }
                    })
            },
            /**
             * @desc 获取海康token
             */
            async getToken() {
                let that = this
                await that.$GET(`${HKACCESSTOKEN}`)
                .then(res => {
                    this.NowToken = res.data
                })
            },
            /**
             * @desc 新增班级信息
             * @param: schoolCode className
             * @return data
             */
            async insertClazz() {
                let that = this
                // 海康--新增班级
                // let formData = new FormData()
                // formData.append("schoolId", that.addform.classInfo.schoolId)
                // formData.append("classInfo", Object(that.addform.classInfo))
                axios.defaults.headers.common['Authorization'] = `${this.NowToken}`
                debugger
                await that.$POST(`https://api2.hik-cloud.com/api/v1/edu/basic/class`, {
                    schoolId: that.addform.classInfo.schoolId,
                    classInfo: {
                        studyLevel: that.addform.classInfo.studyLevel,
                        gradeIndex: that.addform.classInfo.gradeIndex,
                        className: that.addform.classInfo.className,
                        classCode: that.addform.classInfo.classCode
                    }
                })
                .then(res => {
                    if(res.code == 200) {
                        console.log(res)
                        that.insertJavaClazz(res.data.classId)
                    } else {
                        this.$message({
                            message: `${res.message}`,
                            type: 'error'
                        });
                    }
                })
                
            },
            /**
             * @desc JAVA -- 新增
             */
            async insertJavaClazz(classId) {
                let that = this
                await that.$GET(`${INSERT_CLAZZ}`, {
                    schoolCode: that.schoolId,
                    className: that.addform.classInfo.className,
                    hkClassId: classId
                })
                .then(res => {
                    if(res.code == 200) {
                        that.$message.success(res.msg)
                        that.addVisible = false
                        that.getClazz()
                    } else {
                        that.$message.error(res.msg)
                        that.getClazz()
                    }
                })
            },
            /**
             * @desc 编辑班级信息
             * @param: schoolCode className classId
             * @return data
             */
            async updateClazz() {
                let that = this
                console.log(that.editform)
                await that.$GET(`${UPDATE_CLAZZ}`, {
                    schoolCode: that.schoolId,
                    className: that.editform.className,
                    classId: that.editform.classId
                })
                .then(res => {
                    if(res.code == 200) {
                        that.$message.success(res.msg)
                        that.editVisible = false
                        that.getClazz()
                    } else {
                        that.$message.error(res.msg)
                        that.getClazz()
                    }
                })
            }
        }
    }
</script>
<style lang="scss">
    .handle-box {
        margin-bottom: 20px;

        .handle-input {
            width: 300px;
            display: inline-block;
        }
    }

    .red {
        color: #F56C6C;
    }

    .org {
        color: #E6A23C;
    }

    .red:hover,
    .red:focus {
        color: #ff8686;
    }

    .org:hover,
    .org:focus {
        color: #fccd88;
    }

    .page-component__scroll .el-scrollbar__wrap {
        overflow-x: hidden;
    }

    .editClass {
        padding-right: 5%;
    }

    .del-dialog-cnt {
        font-size: 16px;
        text-align: center
    }

    .houtai-drawer__footer {
        text-align: center;
    }
    
    .editClass {
        padding-right: 5%;
    }
</style>